<template>
  <div v-title data-title="个人中心">
    <main>
      <div class="banner"></div>
      <div class="user">
        <div class="head">
          <img :src="user.headimgurl" alt="">
        </div>
        <div class="name">{{user.nickname}}</div>
        <div class="id">乐ID:{{user.userId}}</div>
        <div class="vip" v-if="user.isVip">
          <span>乐VIP </span><span class="time">{{reTime(user.vipExpired)}}到期</span>
        </div>
      </div>
      <ul class="my">
        <li class="my-item">
          <router-link class="link" to="/member" tag="div">
            <span class="icon"></span>
            <div class="text">会员中心</div>
          </router-link>
        </li>
        <li class="my-item">
          <router-link class="link" to="" tag="div" disabled>
          <span class="icon"></span>
          <div class="text">游戏记录</div>
          </router-link>
        </li>
        <li class="my-item">
          <router-link class="link" to="" tag="div" disabled>
          <span class="icon"></span>
          <div class="text">关于我们</div>
          </router-link>
        </li>
      </ul>
    </main>
    <nav-bar this-router='my'></nav-bar>
  </div>
</template>

<script>
import navBar from "../components/navBar";
export default {
  name: 'My',
  components:{navBar},
  mounted(){
    var self = this;
    self.yl.get({
      url:'/mp/my_api/get.json',
      success:function(res){
        if(res.result=='success'){
          self.$store.commit('setUser',res.data);
        }
      }
    })
  },
  methods:{
    reTime: function(date) {
      var gmtCreate = new Date(Number(date)),
        y = gmtCreate.getFullYear(),
        m =
          gmtCreate.getMonth() + 1 <= 9
            ? "0" + (gmtCreate.getMonth() + 1)
            : gmtCreate.getMonth() + 1,
        d =
          gmtCreate.getDate() <= 9
            ? "0" + gmtCreate.getDate()
            : gmtCreate.getDate(),
        h =
          gmtCreate.getHours() <= 9
            ? "0" + gmtCreate.getHours()
            : gmtCreate.getHours(),
        mi =
          gmtCreate.getMinutes() <= 9
            ? "0" + gmtCreate.getMinutes()
            : gmtCreate.getMinutes(),
        s =
          gmtCreate.getSeconds() <= 9
            ? "0" + gmtCreate.getSeconds()
            : gmtCreate.getSeconds();
      var date1 = y + "-" + m + "-" + d + " " + h + ":" + mi + ":" + s;
      return date1;
    }
  },
  computed:{
    user(){
      return this.$store.state.user;
    }
  }
}
</script>

<style scoped>
main{
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #f2f2f2;
}
main .banner{
  height: 4.3rem;
  background: url('https://i.yile.vip/b/Y78hdf0id61188991049_IDXUSU.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
main .user{
  width: 100%;
  position: relative;
  text-align: center;
  padding-top: 1.45rem;
  padding-bottom: .3rem;
}
main .user .head{
  position: absolute;
  top: -1.3rem;
  left: calc(50% - 1.33rem);
  border: .08rem solid #fff;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: auto;
  overflow: hidden;
  box-shadow: 0 .1rem .1rem rgba(99,99,99,0.15);
}
main .user .name{
  font-size: .36rem;
  font-weight: bold;
  color: #333;
}
main .user .id{
  font-size: .3rem;
  color: #666;
}
main .user .vip{
  margin-top:.2rem; 
  font-size: .32rem;
  color: #946500;
}
main .user .vip .time{
  color: #f7ab08;
}

main .my{
  overflow: hidden;
}
main .my .my-item{
  float: left;
  width: 33%;
  text-align: center;
  padding: .1rem 0;
}
main .my .my-item:nth-child(2){
  border-left: 1px dashed #d2d2d2;
  border-right: 1px dashed #d2d2d2;
  box-sizing: border-box;
}
main .my .my-item .icon{
  height: .97rem;
  display: inline-block;
}
main .my .my-item:nth-child(1) .icon{
  width: 1.17rem;
  background: url('https://i.yile.vip/c/Y78hdpe3lp4000021780_hIsUhU.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
main .my .my-item:nth-child(2) .icon{
  width: .97rem;
  background: url('https://i.yile.vip/c/Y78he01fli2991102595_mMRYPM.png') 0 0 no-repeat;
  background-size: 100% 100%;
  filter: grayscale(100%);
}
main .my .my-item:nth-child(3) .icon{
  width: .96rem;
  background: url('https://i.yile.vip/d/Y78he0336i1348020783_zgHcAf.png') 0 0 no-repeat;
  background-size: 100% 100%;
  filter: grayscale(100%);
}
</style>
